<template>
  <el-col>
    <el-form :model="form" label-width="120px">
      <el-form-item label="用户">
        {{ form.id }}
      </el-form-item>
      <el-form-item label="余额">
        {{ balance }}
      </el-form-item>
      <el-form-item label="充值">
        <el-input v-model="form1.inc" type="number"/>
        单位：元
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onRecharge">充值</el-button>
      </el-form-item>
    </el-form>
  </el-col>
  <el-descriptions
    class="margin-top"
    :column="5"
    border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          详单编号
        </div>
      </template>
      {{ order_id }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          详单生成时间
        </div>
      </template>
      {{ generate_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          充电桩编号
        </div>
      </template>
      {{ station_id }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          充电电量
        </div>
      </template>
      {{ amount }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          充电时长
        </div>
      </template>
      {{ charge_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          启动时间
        </div>
      </template>
      {{ start_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          停止时间
        </div>
      </template>
      {{ end_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          充电费用
        </div>
      </template>
      {{ charge_cost }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          服务费用
        </div>
      </template>
      {{ service_cost }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          总费用
        </div>
      </template>
      {{ cost }}
    </el-descriptions-item>
  </el-descriptions>
  <el-form-item class="button">
    <el-button type="primary" @click="onPay">支付</el-button>
  </el-form-item>
</template>

<script>
import axios from 'axios';
import Global from './Global.vue';

export default {
  name: 'ChargeInfo',
  data() {
    return {
      form: {
        id: Global.id,
      },
      form1: {
        id: Global.id,
        inc: '',
      },
      balance: '',
      mode: '',
      amount: '',
      order_id: '',
      generate_time: '',
      station_id: '',
      charge_time: '',
      start_time: '',
      end_time: '',
      charge_cost: '',
      service_cost: '',
      cost: '',
    };
  },
  mounted() {
    this.showInfo();
  },
  methods: {
    onPay() {
      const path = '/api/pay_order';
      axios.post(path, this.form)
        .then((res) => {
          if (res.data.ok) {
            this.$message.success('支付成功');
          } else {
            this.$message.success('充电中、已支付或余额不足');
          }
        });
    },
    onRecharge() {
      const path = '/api/inc_balance';
      axios.post(path, this.form1)
        .then((res) => {
          if (res.data.ok) {
            this.$message.success('充值成功');
          } else {
            this.$message.success('充值失败');
          }
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
    showInfo() {
      const path1 = '/api/get_balance';
      axios.post(path1, this.form)
        .then((res) => {
          this.balance = res.data.balance;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
      const path = '/api/get_order';
      axios.post(path, this.form)
        .then((res) => {
          this.order_id = res.data.order_id;
          this.generate_time = res.data.generate_time;
          this.station_id = res.data.station_id;
          this.amount = res.data.amount;
          this.charge_time = res.data.charge_time;
          this.start_time = res.data.start_time;
          this.end_time = res.data.end_time;
          this.charge_cost = res.data.charge_cost;
          this.service_cost = res.data.service_cost;
          this.cost = res.data.const;
          Global.station_id = res.data.station_id;
        })
        .catch((error) => {
          // eslint-disable-next-line
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
.button {
  margin-top: 50px;
  margin-left: 45%;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 300px;
}
</style>
